<template>
	<view class="container">
		<view class="input">
			<view class="input_after">+86</view>
			<input placeholder="请输入您的手机号" type="number" v-model="phone" :maxlength="11"/>
		</view>
		<view class="tips text_opblack">*未注册的手机号首次登录将自动注册</view>
		<view class="button" v-if="phone!=null&&phone.length>0" style="background:#FF6E00;" @click="gohref">获取验证码</view>
		<view class="button" v-else style="background:#C1C1C1;" @click="nosend">获取验证码</view>
		<checkbox-group @change="checkboxChange($event,item)" class="checkView">
			<label class="login_tips text_black">
				<checkbox style="transform:scale(0.7)" value="1" :checked="checked=='1'" color="#fff"></checkbox>
				请勾选阅读并同意
			</label>
			<view class="login_tips checkTips"><view @click="goUserAgree">《用户服务协议》</view>和<view @click="goAgree">《隐私政策》</view></view>
		</checkbox-group>
		<!-- <view class="image">
			<image src="../../static/imgs/login/authentication.png"></image>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:null,
				checked:0,
			}
		},
		onLoad() {
	
		},
		methods: {
			gohref(){
				if(this.phone.length!=11){
					uni.showToast({
						title:"请输入正确的手机号",
						icon:'none'
					})
					return;
				}
				if(this.checked==0){
					uni.showToast({
						title:"请同意《用户服务协议》和《隐私政策》",
						icon:'none'
					})
					return;
				}
				uni.navigateTo({
					url:"/pages/login/code?phone="+this.phone,
				})
			},
			nosend(){
				uni.showToast({
					title:"请输入手机号",
					icon:'none'
				})
			},
			checkboxChange(e){
				console.log(e)
				if(e.detail.value.length>0){
					this.checked = 1
				}else{
					this.checked = 0
				}
			},
			goUserAgree(){
				uni.navigateTo({
					url:"/pages/login/user_agreement"
				})
			},
			goAgree(){
				uni.navigateTo({
					url:"/pages/login/agreement"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./index.scss");
	.text_black{
		color: $uni-text-color-black!important;
	}
	.text_opblack{
		color: $uni-text-color-opblack!important;
	}
	.checkView{
		display: flex;
		.checkTips{
			margin-left: 0;
		}
	}
</style>